<script lang="ts" setup>
import PageProxy from '@/components/PageProxy.vue'
import { routesHistory, routesHistoryOther_tabBars, type RoutesHistoryItem } from '@/utils/routesHistory'
import { useProxyComponentName, PlaceComponents } from '@/utils/tools'

const proxyComponentName = useProxyComponentName()

// KeepAlive 需要等待组件失活后才能销毁
const routesHistoryPost = shallowRef<RoutesHistoryItem[]>([])
watchPostEffect(() => routesHistoryPost.value = [...routesHistory])

// 当前缓存的页面栈+固定缓存的tabBar
const keepAliveInclude_tabBars = [...routesHistoryOther_tabBars.values()].map(to => to.__id)
const keepAliveInclude = computed(() => [...keepAliveInclude_tabBars, ...routesHistoryPost.value.map(to => to.__id)])
const currentHistory = computed(() => routesHistoryPost.value.at(-1))

</script>

<template>
  <div class="App">
    <RouterView v-slot="{ Component }">
      <KeepAlive :include="keepAliveInclude">
        <component v-if="currentHistory" :key="currentHistory.__id" :is="proxyComponentName(currentHistory.__id)">
          <PageProxy :historyItem="currentHistory">
            <component :is="Component" />
          </PageProxy>
        </component>
      </KeepAlive>
    </RouterView>
    <div id="toastCont">
      <div id="toastCont-loading" />
    </div>
    <PlaceComponents />
  </div>
</template>

<style lang="scss" scoped>
.App {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>
